<template>
	<view style="position: relative;">
		<view v-if="maskshow" class="mask">
			<view class="con">
				<view class="top">
					<image :src="image" mode=""></image>
					<view class="text">
						<view class="title">{{datalist.name}}</view>
						<view class="">库存数量:</view>
					</view>
					<uni-icons @click='maskshow=false' style="margin-top: 60rpx;" type="close" size="24"></uni-icons>
				</view>
				<view class="goods">商品选择</view>
				<view class="item" :class="item.pic==image?'act':''" @click="changeimage(item.pic,index)" v-for="(item,index) in datalist.skuList"><text
					 v-for="con in JSON.parse(item.spData)">{{con.key}}:{{con.value}}</text></view>
				<view class="goods">特色服务</view>
				<view class="item" @click="choice" :class="str=='door'?'act':''">送货上门</view>
				<view class="item" @click="choice1" :class="str1=='door1'?'act':''">上门 安装</view>
				<view class="count">
					<view class="goods">
						购买数量
					</view>
					<view class="bottom">
						<view @click="low()" class="low">
							-
						</view>
						<view class="count1">
							{{quantity}}
						</view>
						<view @click="add()" class="add">
							+
						</view>
					</view>
				</view>
				<button @click="buy('buy')" v-if="isbuy" class="default" type="default">确定</button>
				<button @click="addcar('add')" v-else class="default" type="default">确定</button>
			</view>

		</view>

		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title=''></uni-nav-bar> -->
		<!-- 轮播区域 -->
		<swiper :circular="circular" class="swiper" :indicator-color="color" :indicator-active-color="coloract"
		 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in datalist.skuList" :key="item.id">
				<image class="bannerimage" :src="item.pic" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="collect">
			<view @click="collect" class="img">
				<uni-icons class="image" :style="{color: iconcolor }" type="star-filled" size="36"></uni-icons>
			</view>
		</view>
		<view class="goodspeice">
			<view class="left">
				<text style="color:#f2270c;font-size:32rpx;font-weight:800">￥</text>
				<text style="color:#f2270c;font-size:60rpx">{{datalist.price}}</text>
				<text style="color:#f2270c;font-size:32rpx">.00</text>
				<text style="color:#b5b5b5;font-size:32rpx;text-decoration:line-through" v-if="datalist.promotionPrice">￥{{datalist.promotionPrice}}</text>
			</view>
			<view class="sale">没有促销使用原价</view>
		</view>
		<view class="goodsname">
			{{datalist.name}}
		</view>
		<view class="goodsdes1">
			{{datalist.description}}
		</view>

		<jyf-parser class="goodsdes" v-if="datalist.detailMobileHtml" :html="datalist.detailMobileHtml" ref="article"></jyf-parser>

		<view class="bottom-tool">
			<image src="../../../static/images/icons/kf.png" mode=""></image>
			<view class="btns">
				<view @click="isbuy=false;maskshow=true" class="addcar">
					添加到购物车
				</view>
				<view @click="maskshow=isbuy=true" class="buynow">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		productDetail
	} from '../../../api/home/goodsinfo/goodsinfo.js'
	import {
		findAllCartItem,
		addCart,
		clearCart,
		delCartItems
	} from "../../../api/my/car/car.js"

	import {
		addPreOrder,
		getPreOrderById,
		addConfirmOrder,
		payConfirm,
		receiveDone,
		deleteOrder
	} from "../../../api/my/order/order.js"
	import {
		mapMutations
	} from "vuex"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				circular: true,
				color: '#767674',
				coloract: "#D8D8D8",
				datalist: '',
				quantity: 1,
				image: "",
				str: '',
				str1: ' ',
				isbuy: false,
				maskshow: false,
				num: 0,
				iconcolor: "#fff"
			};
		},
		methods: {

			// 收藏商品
			collect() {
				console.log('111');
				var arr = uni.getStorageSync('collectlist')
				if (arr) {
					console.log(arr);
					var index = arr.findIndex(el => {
						return this.datalist.id == el.id
					})
					if (index != -1) {
						arr.splice(index, 1)
						this.iconcolor = '#ffffff'
					} else {
						arr.unshift(this.datalist)
						this.iconcolor = '#354E44'
					}
				} else {
					arr = []
					arr.push(this.datalist)
					this.iconcolor = '#354E44'
				}
				uni.setStorageSync('collectlist', arr)
			},
			// 加入购物车
			addcar(id) {
				console.log(id);
				console.log(uni.getStorageSync('token'));
				if (uni.getStorageSync('token')) {
					addCart({
						"productId": this.datalist.id,
						"productSkuId": this.datalist.skuList[this.num].id,
						"quantity": this.quantity
					}).then(res => {
						console.log(res);
						if (res.success) {
							uni.showToast({
								title: '加入购物车成功'
							})
							this.maskshow = false
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				} else {
					uni.showModal({
						title: "登录提示",
						content: "暂未登录，是否立即登录",
						success(res) {
							if (res.confirm) { // 跳转到登录
								uni.navigateTo({
									url: '/pages/my/register/register',
								});
							} else { // 
								uni.showToast({
									title: "取消",
									icon: "none"
								})
							}
						}
					})
				}

			},
			// 购买
			buy(id) {
				console.log(id);
				addPreOrder({
					"orderItemList": [{
						"cartId": "",
						"productId": this.datalist.id,
						"productQuantity": this.quantity,
						"productSkuId": this.datalist.skuList[this.num].id,
					}],
				}).then(res => {
					console.log(res);
					if (res.success) {
						this.maskshow = false
						uni.showToast({
							title: '跳转至付款页面'
						})

						setTimeout(function() {
							uni.navigateTo({
								url: `../../my/waitpay/waitpay?id=${res.data.orderId}`
							}, 1700)
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			choice() {
				if (this.str == 'door') {
					this.str = ''
				} else {
					this.str = 'door'
				}
			},
			choice1() {
				if (this.str1 == 'door1') {
					this.str1 = ''
				} else {
					this.str1 = 'door1'
				}
			},
			// 切换图片
			changeimage(pic, index) {
				console.log(pic);
				this.image = pic;
				this.num = index
			},
			add() {
				this.quantity++
			},
			low() {
				if (this.quantity == 1) {
					return
				} else {
					this.quantity--
				}

			}
		},
		onShow() {

		},
		onLoad(e) {

			console.log(e);
			productDetail(e.id).then(res => {
				console.log(res)
				this.datalist = res.data.product;
				this.image = res.data.product.skuList[0].pic

				var arr = uni.getStorageSync('collectlist')
				var index = arr.findIndex(el => {
					return this.datalist.id == el.id
				})
				console.log(index);
				if (index == -1) {
					this.iconcolor = '#ffffff'
				} else {
					this.iconcolor = '#354E44'
				}

			})
		}
	}
</script>

<style lang="scss">
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 888;
		display: flex;
		box-sizing: border-box;

		.con {
			width: 600rpx;
			height: auto;
			border-radius: 24rpx;
			margin: auto;
			background-color: #fff;
			padding: 0 40rpx;
			box-sizing: border-box;

			.top {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				margin-top: -40rpx;

				image {
					width: 192rpx;
					border-radius: 12rpx;
					box-sizing: border-box;
					height: 192rpx;
				}

				.text {
					padding-top: 100rpx;
					font-size: 24rpx;
					color: #b0b0b0;
					margin-top: 6rpx;
					line-height: 32rpx;
					box-sizing: border-box;
					width: 240rpx;

					.title {
						font-size: 28rpx;
						color: #3e3e3e;
						font-weight: 600;
						box-sizing: border-box;
					}
				}
			}


			.goods {
				font-size: 28rpx;
				color: #3e3e3e;
				line-height: 40rpx;
				box-sizing: border-box;
				letter-spacing: 4rpx;
				font-weight: 600;
				margin-top: 40rpx;
			}


			.item {
				box-sizing: border-box;
				width: 520rpx;
				border-radius: 12rpx;
				margin-top: 20rpx;
				height: 60rpx;
				box-sizing: border-box;
				line-height: 60rpx;
				color: #3e3e3e;
				background: #f2f4f3;
				font-size: 24rpx;
				padding-left: 20rpx;
			}

			.act {
				background-color: #354e44;
				box-sizing: border-box;
				color: white;
			}

			.count {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.default {
				width: 280rpx;
				height: 80rpx;
				background: #354e44;
				border-radius: 20rpx;
				margin: 48rpx auto;
				color: #fff;
				box-sizing: border-box;
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.bottom {
				width: 260rpx;
				float: right;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				margin-top: 40rpx;

				.low,
				.add {
					width: 50rpx;
					height: 50rpx;
					background-color: #F1ECE7;
					box-sizing: border-box;
					text-align: center;
					line-height: 42rpx;
					font-size: 40rpx;
					border-radius: 50%;
				}

				.count1 {
					width: 120rpx;
					height: 50rpx;
					background-color: #F1ECE7;
					text-align: center;
					box-sizing: border-box;
					line-height: 50rpx;
					font-size: 34rpx;
					border-radius: 30rpx;
				}
			}
		}
	}

	.swiper {
		width: 750rpx;
		height: 600rpx;
		box-sizing: border-box;

		image {
			width: 750rpx;
			height: 600rpx;
			box-sizing: border-box;
		}
	}

	.collect {
		width: 100%;
		margin-top: -50rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;

		.img {
			float: right;
			margin-right: 60rpx;
			width: 100rpx;
			height: 100rpx;
			background-color: #eee;
			border-radius: 50%;
			text-align: center;
			line-height: 95rpx;
			box-sizing: border-box;
			box-shadow: 0 32rpx 48rpx 0 rgba(70, 70, 70, .2);

			.image {}
		}
	}

	.goodspeice {
		margin-top: 100rpx;
		font-family: fantasy;
		box-sizing: border-box;
		padding: 5rpx 40rpx;
		overflow: hidden;

		.left {
			float: left;
			box-sizing: border-box;
		}

		.sale {
			float: left;
			width: 230rpx;
			text-align: center;
			padding: 4rpx 10rpx;
			border-radius: 4rpx;
			box-sizing: border-box;
			background-color: #f2270c;
			color: #fff;
			font-size: 20rpx;
			margin-top: 25rpx;
			margin-left: 40rpx;
			position: relative;

			&::after {
				content: '';
				display: block;
				width: 10rpx;
				box-sizing: border-box;
				height: 10rpx;
				border-radius: 50%;
				position: absolute;
				left: -5rpx;
				top: 15rpx;
				background-color: #F1ECE7;
			}

			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				box-sizing: border-box;
				border-radius: 50%;
				position: absolute;
				right: -5rpx;
				top: 15rpx;
				background-color: #F1ECE7;
			}
		}

	}

	// 商品名字
	.goodsname {
		padding: 10rpx 40rpx;
		color: #262626;
		overflow: hidden;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 50rpx;
	}


	// 商品描述
	.goodsdes1 {
		padding: 10rpx 40rpx;
		font-size: 24rpx;
		line-height: 1.3;
		color: #666;
		box-sizing: border-box;
		line-height: 36rpx;
	}

	.goodsdes {
		margin-bottom: 140rpx;
		box-sizing: border-box;

		p {
			padding: 0 40rpx;
			width: 650rpx;
			box-sizing: border-box;

			img {
				width: 650rpx;
				box-sizing: border-box;
			}
		}
	}

	.bottom-tool {
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
		}

		.btns {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 30rpx;

			.addcar {
				width: 240rpx;
				height: 80rpx;
				text-align: center;
				background-color: #e2e2e2;
				box-sizing: border-box;
				color: #8f8f94;
			}

			.buynow {
				width: 240rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #fff;

				text-align: center;
				background-color: #354e44;
				box-sizing: border-box;
			}
		}
	}
</style>
